• 阐述

  动画状态 animation-play-state 是一个 HTML 属性，可以控制该元素 CSS 动画的播放与否。

• 实例

  我们可以使用 React 状态来动态确定元素是否需要动画：

• 性质

• 相关内容

  function App() {
  const [
    animated,
    setAnimated
  ] = React.useState(false);
  
  return (
    <Wrapper>
      <Box
        style={{
          animationPlayState: animated
            ? 'running'
            : 'paused',
        }}
      />
      <button
        onClick={() => {
          setAnimated(!animated);
        }}
      >
        {animated
          ? 'Pause animation'
          : 'Start animation'
        }
      </button>
    </Wrapper>
  );
  }

• 参考文献